<template>
<el-row>
  <el-col :span="12">
  <!-- 商品的图片-->
    <el-carousel height="400px"  motion-blur>
      <el-carousel-item v-for="(pic,index) in goods.picList" :key="index">
        <el-image style="height: 400px;width: 600px" fit="contain" :src="`${SERVER_ADDR}/goods/pic/${pic.url}`"/>
      </el-carousel-item>
    </el-carousel>
  </el-col>
  <el-col :span="12">
  <!--  商品的基本信息-->
    <div class="info">
      <div class="name">{{goods.name}}</div>
      <div class="dscp">{{goods.dscp}}</div>
      <div class="price">售价：￥{{goods.price}}</div>
      <div class="markPrice">标价：￥{{goods.markPrice}}</div>
      <div class="color">
        <span> 颜色：{{goods.color}}</span>
       </div>
      <div class="version">
        <span>
            版本：{{goods.version}}
        </span>
      </div>
      <div class="count">数量：{{goods.count}}</div>
      <div class="score">
        <el-rate
            v-model="goods.score"
            disabled
            show-score
            text-color="#ff6800"
            :colors="['#ff6800','#ff6800','#ff6800']"
            score-template="{value} 分"
        />
      </div>
      <div class="goodsBtn">
        <el-button type="primary" size="large" @click="insertCart"><el-icon><ShoppingCart /></el-icon>加入购物车</el-button>
        <el-button type="success" size="large" @click="toCrateOrderView"><el-icon><Coin /></el-icon>直接购买</el-button>
        <el-button type="info" size="large" v-if="!collectInfo" @click="collect"><el-icon><Star /></el-icon>收藏</el-button>
        <el-button type="danger" size="large" v-else @click="collectout"><el-icon><StarFilled/></el-icon>取消收藏</el-button>
      </div>
    </div>
  </el-col>
</el-row>
  <el-row>
    <el-tabs model-value="first" class="demo-tabs">
      <el-tab-pane label="商品详情" name="first" v-html="goods.detail"/>
     <el-tab-pane label="商品评价" name="fourth" v-html="goods.detail"/>
    </el-tabs>
  </el-row>
</template>

<script setup>

import {useRoute} from "vue-router";
import goodsApi from "@/api/goodsApi.js";
import {ref} from "vue";
import collectApi from "@/api/collectApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import cartApi from "@/api/cartApi.js";
import {useRouter} from "vue-router";

const router=useRouter();

const tokenStr=useTokenStore();
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
const route =useRoute();
const goods = ref({});
//商品收藏的状态
const collectInfo = ref(null);

function toCrateOrderView(){
  let goodsId=route.query.id;
  router.push({
    path:"/user/createOrder" ,
    query:{
     goodsId
    }
  })
}

//加入购物车
function insertCart(){
  cartApi.insert(goods.value.id)
      .then(resp =>{
        if (resp.code == 10000){
          // ElMessage.success(resp.msg);
          // router.push("/user/cart");
          ElMessageBox.confirm(
              '加入购物车成功,是否跳转购物车页面',
              '提示',
              {
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type: 'info',
              }
          ).then(()=>{
            router.push("/user/cart");
          });

        }else {
          ElMessage.error(resp.msg);
        }
      })

}


//根据商品id查询商品的详情信息
function selectById(){
  let id= route.query.id;
  goodsApi.selectById(id)
      .then(resp =>{
        goods.value=resp.data;
        //当前商品收藏的情况
       if(tokenStr.token){
         getCollectInfo();
       }
      })
}

function getCollectInfo(){
  collectApi.selectByGoodsIdAndUserId(goods.value.id)
      .then(resp =>{
        collectInfo.value =resp.data
      })
}
//收藏
function  collect(){
  collectApi.insert(goods.value.id)
      .then(resp =>{
       if (resp.code == 10000){
         ElMessage.success(resp.msg);
          getCollectInfo();
       }else {
         ElMessage.error(resp.msg);
       }
      })
}
//取消收藏
function  collectout(){
  collectApi.delete(collectInfo.value.id)
      .then(resp =>{
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          getCollectInfo();
        }else {
          ElMessage.error(resp.msg);
        }
      })
}


selectById();

//.el-carousel{
//  padding-top: 15px;
//  border: 2px solid #000000;
//}
//.info {
//  margin: 30px 30px;
//}
//.info div{
//  margin-bottom: 15px;
//}
//.info .name{
//  font-weight: bold;
//  font-size: 25px;
//}
//.info .dscp{
//  color: #cccccc;
//}
//.info .price{
//  color: var(--theme-color);
//  font-size: 18px;
//}
//.info .markPrice{
//  color: #999;
//  font-size: 15px;
//  text-decoration: line-through;
//}
//.info span{
//  border: 2px solid var(--theme-color);
//  border-radius: 5px;
//  padding: 0 10px;
//  background-color: #FFFFFF;
//}
//.info .count{
//  font-size: 15px;
//}
//.el-icon{
//  margin-right: 5px;
//}
</script>
<style scoped>


.el-carousel {
  padding-top: 15px;
  border: 2px solid #ddd; /* 调整为较浅的灰色边框 */
  border-radius: 10px; /* 添加圆角 */
  overflow: hidden; /* 防止内容溢出 */
}

.el-carousel-item img {
  width: 100%; /* 确保图片适应容器宽度 */
  height: auto; /* 保持图片的纵横比 */
  display: block; /* 移除图片底部的间隙 */
}

.info {
  margin: 30px;
  padding: 20px;
  background-color: #f9f9f9; /* 添加浅灰色背景 */
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影 */
}

.info div {
  margin-bottom: 15px;
}

.info .name {
  font-weight: bold;
  font-size: 24px;
  color: #333; /* 调整为较深的字体颜色 */
}

.info .dscp {
  color: #666; /* 调整为中等灰色的描述文字 */
  font-size: 16px;
  line-height: 1.5; /* 调整行高以增加可读性 */
}

.info .price,
.info .markPrice {
  font-size: 18px;
}

.info .price {
  color: #ff6347; /* 调整为醒目的红色或橙色价格 */
}

.info .markPrice {
  color: #999; /* 保留为灰色且带删除线的原价 */
  text-decoration: line-through;
  font-size: 16px; /* 稍微减小原价字体大小 */
}

.info span {
  background-color: #e0e0e0; /* 调整为浅灰色背景 */
  border: none; /* 移除边框 */
  border-radius: 5px;
  padding: 0 10px;
  color: #333; /* 深色文字以增加对比度 */
}

.info .count {
  font-size: 16px;
  color: #666; /* 中等灰色库存信息 */
}

.el-rate {
  margin-bottom: 15px; /* 增加评分与按钮之间的间距 */
}

.goodsBtn {
  display: flex; /* 使用flex布局使按钮水平排列 */
  gap: 10px; /* 按钮之间的间距 */
  margin-top: 20px; /* 增加按钮与上方内容的间距 */
}

.goodsBtn .el-button {
  flex: 1; /* 使按钮宽度相等 */
}

.el-icon {
  margin-right: 5px;
}

/* 隐藏重复的标签页内容，如果需要显示不同内容，请确保 goods.detail 和 goods.comments 是不同的 */
.el-tabs .el-tab-pane:not(:first-child) {
  display: none; /* 暂时隐藏，如果需要请移除这行 */
}

</style>